<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css绘制三角形原理</title>
	<style>
           .triangle-right {
           	width: 0;
           	height: 0;
           	border-top: 50px solid transparent;
           	    border-left: 100px solid red;
           	    border-bottom: 50px solid transparent;
           }
           .triangle-top-left {
           	width: 0;
           	height: 0;
           	border-top: 100px solid red;
           	    border-right: 100px solid transparent;
           }
           .IE6{
           	width: 0;
           	height: 0;
           	border-width:100px;
           	border-style: solid; 
           	border-color:red tomato tomato tomato; 
           	filter:chroma(color=tomato); 
           }
	</style>
</head>
<body>
	<div class="triangle-right "></div>
	<div class="triangle-top-left"></div>

	<h1>原理</h1>
	<div style="width: 100px;height: 100px;border-width: 30px;border-style: solid;border-color: red green black yellow"></div>
	<h2>将上面边框设为透明只保留一边，同样方法应用到圆角边</h2>
	<div style="width: 100px;height: 100px;border-width: 30px;border-style: solid;border-color: red transparent transparent transparent"></div>
	<h2>再将宽高去掉</h2>
	<div style="width: 0px;height: 0px;border-width: 30px;border-style: solid;border-color: red transparent transparent transparent"></div>
	<h2>如果要兼容IE6 将设置透明的边框的border-style设置为dotted或者dashed</h2>
</body>
</html>